<template>
<div class="page-container page-container-create">
    <!--面包屑导航-->
    <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>营销中心</el-breadcrumb-item>
            <el-breadcrumb-item>其他类促销</el-breadcrumb-item>
            <el-breadcrumb-item>抽奖</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!--页面标题-->
    <p class="font22 mb20" v-if="id && id != '0'">编辑抽奖</p>
    <p class="font22 mb20" v-else>创建抽奖</p>
    <!--工具栏-->
    <div class="toolbar">
        <!--顶部抽奖步骤栏-->

        <div class="stepset stepset3">
            <ul>
                <li :class="{'active':active>=1}">
                    <span>1</span>
                    <p>设置活动规则</p>
                </li>
                <li :class="{'active':active>=2}">
                    <span>2</span>
                    <p>设置活动商品</p>
                </li>
                <li :class="{'active':active>=3}">
                    <span>3</span>
                    <p>创建成功</p>
                </li>
            </ul>
        </div>

        <!-- 第一步 设置抽奖规则 -->
        <div v-show="active == 1" class="content create_stepOne createSet">
            <el-form ref="lotteryInfoForm" :model="lotteryInfoForm" :rules="lotteryInfoFormRules" :inline="true">
                <!-- 基本信息 -->
                <div>
                    <div class="title">基本信息：</div>
                    <div class="item">
                        <el-row class="m_b30">
                            <el-form-item label="活动名称：" prop="activityName" label-width="176px" class="t_r">
                                <el-input clearable v-model.trim="lotteryInfoForm.activityName" placeholder="限制在60个字符以内" minlength="3" maxlength="60" class="input"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row class="m_b30">
                            <el-form-item label="活动时间：" label-width="176px" class="t_r w450" prop="promotionStartEndTime">
                                <el-date-picker v-model="lotteryInfoForm.promotionStartEndTime" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" size="mini" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="timeCheck"></el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row class="m_b30">
                            <el-form-item label="活动搜索词：" label-width="176px" prop="activitySearch" class="t_r w450">
                            <el-input type="text" v-model.trim="lotteryInfoForm.activitySearch" placeholder="多个搜索词可用数据逗号“,”隔开" class="input" clearable/>
                            </el-form-item>
                        </el-row>
                        <el-row class="m_b30">
                            <el-form-item label="活动费用预算：" prop="activityBudget" class="t_r w450" label-width="176px">
                                <el-input type="text" oninput="value = value.match(/^\d*(\.?\d{0,2})/g)[0]"  maxlength="10" v-model.trim="lotteryInfoForm.activityBudget" placeholder="请输入平台营销费用" class="input" clearable/>
                            </el-form-item>
                            <span class="endAlignment font16 color333 turnInlineBlock m_l10">&nbsp;&nbsp;元</span>
                        </el-row>
                        <el-row class="m_b30">
                            <el-form-item label="预警比例：" prop="warningProportion" class="t_r w450" label-width="176px">
                                <el-input type="text" v-model.trim="lotteryInfoForm.warningProportion"
                                placeholder="请输入预警比例：" maxlength="2" class="input" clearable oninput="value=value.replace(/[^\d]/g,'')"/>
                            </el-form-item>
                            <span class="endAlignment font16 color333 turnInlineBlock m_l10">&nbsp;&nbsp;%</span>
                        </el-row>
                    </div>
                </div>

                <!-- 活动规则 -->
                <div class="w100">
                    <div class="title">活动规则：</div>
                    <div class="item">
                        <el-row class="labelAlignment m_b30">
                            <el-form-item label="活动类型：" prop="lotteryType" label-width="176px" class="t_r">
                                <el-radio-group v-model="lotteryInfoForm.lotteryType" @change="lotteryTypeChange">
                                    <el-radio border :label="1" class="form-radio m_r45 radioAlignment noMarginLeft w145 t_l">普通抽奖</el-radio>
                                    <el-radio border :label="2" class="form-radio radioAlignment noMarginLeft  w145 t_l" >订单抽奖</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-row>
                        <!--  单次消费订单金额X元 -->
                        <el-row v-show="lotteryInfoForm.lotteryType==2" class="no100">
                            <el-row class="mb30 nomargin">
                                <el-form-item prop="orderDrawAmountOne">
                                    <el-radio v-model="lotteryInfoForm.orderDrawType" :label="1" @change="orderDrawTypeChange" class="radioLabelcolor333 radioLabelSize16 turnBlock f_l" style="width:176px ">单次消费订单金额：</el-radio>
                                    <el-input clearable v-model="lotteryInfoForm.orderDrawAmountOne" oninput="value = value.match(/^\d*(\.?\d{0,2})/g)[0]" size="mini" maxlength="10" :disabled="lotteryInfoForm.orderDrawType!=1" class="inputWidth w145"></el-input>
                                    <span class="endAlignment font16 color333 turnInlineBlock m_l10">元</span>
                                </el-form-item>
                            </el-row>
                            <el-form-item label="每个订单抽奖次数：" prop="drawTimesPerOrderOne">
                                <el-input clearable v-model.number="lotteryInfoForm.drawTimesPerOrderOne" oninput="value=value.replace(/[^\d]/g,'')" size="mini" maxlength="10" :disabled="lotteryInfoForm.orderDrawType!=1" class="inputWidth w145"></el-input>
                                <span class="font16 color333 turnInlineBlock m_l10">次</span>
                            </el-form-item>
                        </el-row>
                        <!--  消费订单金额每满X元 -->
                        <el-row v-show="lotteryInfoForm.lotteryType==2" class="no100 mb30">
                            <el-row class="nomargin">
                                <el-form-item prop="orderDrawAmountTwo">
                                    <el-radio v-model="lotteryInfoForm.orderDrawType" :label="2" @change="orderDrawTypeChange" class="radioLabelcolor333 radioLabelSize16 turnBlock f_l" style="width:176px">消费订单金额每满：</el-radio>
                                    <el-input clearable v-model="lotteryInfoForm.orderDrawAmountTwo" oninput="value = value.match(/^\d*(\.?\d{0,2})/g)[0]" size="mini" maxlength="10" :disabled="lotteryInfoForm.orderDrawType!=2" class="inputWidth w145"></el-input>
                                    <span class="endAlignment color333 font16 turnInlineBlock m_l10">元</span>
                                </el-form-item>
                            </el-row>
                            <el-form-item label="可获得抽奖次数：" prop="drawTimesPerOrderTwo" label-width="144px" class="t_r">
                                <el-input clearable v-model.number="lotteryInfoForm.drawTimesPerOrderTwo" oninput="value=value.replace(/[^\d]/g,'')" size="mini" maxlength="10" :disabled="lotteryInfoForm.orderDrawType!=2" class="inputWidth w145"></el-input>
                                <span class="endAlignment font16 color333 turnInlineBlock m_l10">次</span>
                            </el-form-item>
                        </el-row>
                        <!--  累计消费订单金额X元 -->
                        <el-row v-show="lotteryInfoForm.lotteryType==2" class="no100 mb30">
                            <el-row class="nomargin">
                                <el-form-item prop="orderDrawAmountThree">
                                    <el-radio v-model="lotteryInfoForm.orderDrawType" :label="3" @change="orderDrawTypeChange" class="radioLabelcolor333 radioLabelSize16 turnBlock f_l" style="width:176px">累计消费订单金额：</el-radio>
                                    <el-input clearable v-model="lotteryInfoForm.orderDrawAmountThree" oninput="value = value.match(/^\d*(\.?\d{0,2})/g)[0]" size="mini" maxlength="10" :disabled="lotteryInfoForm.orderDrawType!=3" class="inputWidth w145"></el-input>
                                    <span class="endAlignment font16 color333 turnInlineBlock m_l10">元</span>
                                </el-form-item>
                            </el-row>
                            <el-form-item label="可获得抽奖次数：" prop="drawTimesPerOrderThree" label-width="144px" class="t_r">
                                <el-input clearable v-model.number="lotteryInfoForm.drawTimesPerOrderThree" oninput="value=value.replace(/[^\d]/g,'')" size="mini" maxlength="10" :disabled="lotteryInfoForm.orderDrawType!=3" class="inputWidth w145"></el-input>
                                <span class="font16 color333 turnInlineBlock m_l10">次</span>
                            </el-form-item>
                        </el-row>

                        <el-row class="m_b30">
                            <el-form-item label="用户每日抽奖次数上限：" prop="dailyDrawTimesLimit">
                                <el-input clearable v-model.number="lotteryInfoForm.dailyDrawTimesLimit" oninput="value=value.replace(/[^\d]/g,'')" size="mini" maxlength="10" class="inputWidth"></el-input>
                            </el-form-item>
                            <span class="el-form-item__label">&nbsp;次</span>
                        </el-row>
                        <el-row class="m_b30">
                            <el-form-item label="用户每日中奖次数上限：" prop="dailyWinningTimesLimit">
                                <el-input clearable v-model.number="lotteryInfoForm.dailyWinningTimesLimit" oninput="value=value.replace(/[^\d]/g,'')" size="mini" maxlength="10" class="inputWidth"></el-input>
                            </el-form-item>
                            <span class="el-form-item__label">&nbsp;次</span>
                        </el-row>
                    </div>
                </div>
                <!-- 参与条件 -->
                <div class="w100">
                    <div class="title">参与条件：</div>
                    <div class="item">
                        <el-row class="m_b30 labelAlignment">
                            <el-form-item label="新老用户：" prop="selectUserType" class="wid t_r" label-width="176px">
                                <div class="flex">
                                    <el-checkbox :indeterminate="userTypeIsIndeterminate" v-model="userTypeCheckAll" @change="handleCheckAllUserTypeChange" class="mr40 el-checkBox-padding noMarginLeft w145 t_l mleft10" border>全选</el-checkbox>
                                    <el-checkbox-group v-model="selectUserType" @change="handleCheckedUserTypeChange">
                                        <el-checkbox :label="1" :key="1" class="mr40 el-checkBox-padding noMarginLeft  w145 t_l" border>新用户</el-checkbox>
                                        <el-checkbox :label="2" :key="2" class="el-checkBox-padding noMarginLeft  w145 t_l" border>老用户</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                        </el-row>
                        <el-row class="m_b52 labelAlignment">
                            <el-form-item label="会员类型：" prop="selectMemTypes" class="wid t_r" label-width="176px">
                                <div class="flex">
                                    <el-checkbox :indeterminate="memTypeIsIndeterminate" v-model="memTypeCheckAll" @change="handleCheckAllMemTypeChange" class="mr40 el-checkBox-padding noMarginLeft  w145 t_l mleft10" border>全选</el-checkbox>
                                    <el-checkbox-group v-model="selectMemTypes" @change="handleCheckedMemTypeChange">
                                        <el-checkbox :label="1" :key="1" class="mr40 el-checkBox-padding noMarginLeft  w145 t_l" border>普通会员</el-checkbox>
                                        <el-checkbox :label="2" :key="2" border class="el-checkBox-padding noMarginLeft">we2000</el-checkbox>
                                        <el-checkbox :label="3" :key="3" border class="el-checkBox-padding noMarginLeft">分期会员</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                        </el-row>
                        <el-row class="m_b52 labelAlignment">
                            <el-form-item label="渠道入口：" prop="selectChannelCodes" class="wid t_r" label-width="176px">
                                <div class="flex">
                                    <el-checkbox :indeterminate="channelCodesIsIndeterminate" v-model="channelCodesCheckAll" @change="handleCheckAllChannelCodes" class="mr40 el-checkBox-padding noMarginLeft w130 t_l mleft10" border >全选</el-checkbox>
                                    <el-checkbox-group v-model="selectChannelCodes" @change="handleCheckedChannelCodes">
                                        <el-checkbox :label="1" :key="1" border class="mr40 el-checkBox-padding noMarginLeft">企业微信</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                        </el-row>
                        <el-row class="labelAlignment m_b60">
                            <el-form-item label="备注：" prop="remark" label-width="176px" class="t_r">
                                <quill-editor v-model="lotteryInfoForm.remark" ref="myQuillEditor" style="height: 300px;margin-bottom: 45px;margin-top: 10px;" :options="editorOption"></quill-editor>
                            </el-form-item>
                        </el-row>
                    </div>
            </div>
            </el-form>
        </div>

        <!-- 第二部 奖品设置 -->
        <div class="tab-container createSet" v-show="active == 2">
            <el-container class="mt76">
                <div class="aside">
                    <el-row class="awardsSelect">
                        <el-form :inline="true" :model="selectBoard">
                            <el-form-item label="抽奖形式：" prop="awardsLevel" class="select mb30">
                                <!-- <el-select filterable @change="selectBoardChanged" v-model="selectBoard.value" placeholder="请选择抽奖形式" label="选择抽奖形式：">
                                    <el-option v-for="item in selectBoard.options" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
                                </el-select> -->
                                <el-select filterable @change="selectBoardChanged" v-model="selectBoard.value" placeholder="请选择抽奖形式" label="选择抽奖形式：">
                                    <el-option label="大转盘" value="1"></el-option>
                                    <el-option label="刮刮乐" value="2"></el-option>
                                    <el-option label="红包雨" value="3"></el-option>
                                    <el-option label="小we宝盒" value="4"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <el-form class="commonForm" v-for="(item, index) in formDataList" :key="index" :model="item" ref="dynamicValidateForm" :inline="true" label-width="100px">
                        <!-- 本来的6个表单 -->
                        <div class="unit">
                            <!-- 奖项等级 -->
                            <el-form-item :required="true" :show-message="false" label="奖项等级：" prop="awardsLevel" class="select mb30">
                                <el-select v-model="item.awardsLevel" placeholder="请选择">
                                    <el-option v-for="idx in awardsLevelList" :key="idx.id" :label="idx.name" :value="idx.id"></el-option>
                                </el-select>
                            </el-form-item>

                            <!-- 奖品类别 -->
                            <el-form-item :required="true" :show-message="false" label="奖品类别：" prop="awardsCategory" class="select">
                                <el-select v-model="item.awardsCategory" @change="awardsCategoryChange(item.formId)" placeholder="请选择">
                                    <el-option v-for="idx in awardsCategoryList" :key="idx.id" :label="idx.name" :value="idx.id"></el-option>
                                </el-select>
                            </el-form-item>

                            <!-- 添加商品 -->
                            <div v-if="item.awardsCategory === 2" class="mb20 mt20">
                                <el-form-item label="添加商品：" class="t_r">
                                    <el-button v-model="item.awardsRefId" @click="productClick(item.formId,showGoods=true)" class="addGoods searchButton">添加商品</el-button>
                                </el-form-item>
                            </div>

                            <!-- 优惠券 -->
                            <div v-if="item.awardsCategory === 3" class="mb20 mt20">
                                <el-form-item class="t_r ml100">
                                    <el-button v-model="item.awardsRefId" @click="couponClick(item.formId,showGoods=false)" class="addGoods searchButton">添加优惠券</el-button>
                                </el-form-item>
                            </div>

                            <!-- 积分 -->
                            <div v-if="item.awardsCategory === 4" class="mb20 mt20 rate">
                                <el-form-item label="积分：" class="t_r">
                                    <el-input clearable type="number" v-model="item.awardsRefNum" maxlength="10"></el-input>
                                </el-form-item>
                            </div>

                            <!-- 奖品名称 -->
                            <div v-if="item.awardsCategory !== 1" class="mb20 mt20 rate see">
                                <el-form-item :required="true" :show-message="false" label="奖品名称：" class="t_r">
                                    <el-input clearable v-model="item.awardsRefName" maxlength="10" @input="changeValue(item)"></el-input>

                                    <div>
                                        <span style="font-size: 12px;color: #999;float: left;margin-top: 10px;">注：奖品名称将用于h5页面展示</span>
                                    </div>
                                </el-form-item>
                                <el-button type="text" @click="checkAwards(item)" v-if="item.awardsCategory == 2 || item.awardsCategory == 3">查看</el-button>
                            </div>

                            <!-- 奖品图片 -->
                            <div class="mb20 mt20 rate imgUpload">
                                <el-form-item :required="true" :show-message="false" label="奖品图片：" class="t_r">
                                    <el-upload class="avatar-uploader" :show-file-list="false" :action="imgUpload" :on-success="(response, file, fileList) => {imgUploadSuccess(response, file, fileList, index)}" :accept="imageAccept">
                                        <div class="flex">
                                            <div class="img">
                                                <img :src="item.awardsPicUrl" class="avatar" />
                                            </div>
                                            <i class="el-icon-plus avatar-uploader-icon"></i>
                                        </div>
                                    </el-upload>
                                    <div class="tips">
                                        <span>图片像素建议为750*1912px</span>
                                        <span>格式为 jpg/bmp/png/gif</span>
                                    </div>
                                </el-form-item>
                            </div>

                            <!-- 奖品数量 -->
                            <div v-if="item.awardsCategory !== 1" class="mb20 mt20 rate">
                                <el-form-item :required="true" :show-message="false" label="奖品数量：" class="t_r">
                                    <el-input clearable type="number" v-model="item.winningNum" maxlength="10"></el-input>
                                </el-form-item>
                            </div>

                            <!-- 中奖率 -->
                            <div class="mb20 mt20 rate">
                                <el-form-item :required="true" :show-message="false" label="中奖率：" prop="winningRate" class="t_r">
                                    <el-input clearable type="number" v-model="item.winningRate"></el-input>
                                </el-form-item>
                                <span class="precent">%</span>
                            </div>
                            <!-- 删除按钮 只有在改表单大于6的时候才显示 -->
                            <div class="add-wrap" v-if="item.formId > 3">
                                <el-form-item>
                                    <el-button @click.prevent="removeDomain(item)" class="delete cancelButton">删除</el-button>
                                </el-form-item>
                            </div>
                        </div>
                    </el-form>

                    <!-- 选择模板为非必填项，未选择模板时不展示“活动规则”和“投放渠道” -->
                    <el-row class="rule" v-if="selectBoard.value">
                        <el-form :inline="true" :model="actRule" label-width="100px">
                            <el-form-item label="活动规则：" class="mb30">
                                <el-input clearable type="textarea" :rows="8" :placeholder="actRule.placeholder" v-model="actRule.desc" maxlength="2000"></el-input>
                            </el-form-item>
                            <el-form-item label="投放渠道：" class="mb30 channel" required>
                                <el-row class="mb30">
                                    <el-checkbox label="APP安卓端" name="type" class="el-checkBox-padding noMarginLeft" border v-model="actRule.androidVal" @change="actRuleFun()"></el-checkbox>
                                    <el-checkbox label="APP苹果端" name="type" class="el-checkBox-padding noMarginLeft" border v-model="actRule.iosVal" @change="actRuleFun()"></el-checkbox>
                                    <el-checkbox label="H5页面" name="type" class="el-checkBox-padding noMarginLeft" border v-model="actRule.h5Val" @change="actRuleFun()"></el-checkbox>
                                </el-row>

                                <span v-if="actRule.typeRule" style="color: #F56C6C; font-size: 12px; position: absolute; top:30px; left: 0;">请至少选择一个投放渠道</span>

                                <el-row>
                                    <el-form-item label="APP安卓端登录地址：" class="mb30" v-if="actRule.androidVal" label-width="140px" :label-position="right">
                                        <el-input clearable v-model="actRule.androidAdd"></el-input>
                                    </el-form-item>
                                    <el-form-item label="APP苹果端登录地址：" class="mb30" v-if="actRule.iosVal" label-width="140px" :label-position="right">
                                        <el-input clearable v-model="actRule.iosAdd"></el-input>
                                    </el-form-item>
                                    <el-form-item label="H5端登录地址：" class="mb30" v-if="actRule.h5Val" label-width="140px" :label-position="right">
                                        <el-input clearable v-model="actRule.h5Add"></el-input>
                                    </el-form-item>
                                </el-row>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </div>
                <el-main>
                    <div class="mainTab">
                        <el-button v-for="(item,index) in mainTab.list" :key="index" @click="mainTab.current=index" :class="{searchButton:mainTab.current==index , resetButton:mainTab.current!=index}">{{item.name}}</el-button>
                    </div>
                    <!-- 大转盘 -->
                    <div class="lottery" :class="mainTab.current != 0 ?'':'addLotteryLen'" :style="{backgroundImage: 'url(' + descJson.homeJson.mainBgImage + ')' }">
                        <div class="phone">
                            <img v-if="mainTab.current == 0" src="/static/images/lottery/phone2.png" alt />
                            <img v-else src="/static/images/lottery/phone.png" alt />
                        </div>
                        <div class="turnplate">
                            <div class="realCanvas">
                                <canvas ref="myCanvas" id="myCanvas" width="333" height="333"></canvas>
                                <div class="pointer">
                                    <span class="point-span" :style="{background:descJson.homeJson.drawButtonColor}">
                                        点击
                                        <br />抽奖
                                    </span>
                                    <img class="draw-image" src="/static/images/lottery/btn.png" alt />
                                </div>
                            </div>
                        </div>
                        <div class="count">今日免费抽奖次数：10</div>
                        <div class="rule" v-if="mainTab.current == 0">
                            <p class="tit">活动规则</p>
                            <div class="rule-info">
                                <pre v-html="actRule.desc?actRule.desc:actRule.default" class="des"></pre>
                            </div>
                        </div>
                        <!-- 中奖啦 -->
                        <div v-if="mainTab.current==1" class="box">
                            <div class="info" :style="{backgroundImage: 'url(' + descJson.winningJson.bgImage + ')' }">
                                <h3>中奖啦</h3>
                                <div class="img">
                                    <img :src="descJson.winningJson.winImage" alt />
                                </div>
                                <div class="name">
                                    <p>一等奖</p>
                                    <p>奖品名称</p>
                                </div>
                                <el-button class="btn" :style="{background: descJson.winningJson.editUserInfoButtonColor}">编辑个人信息</el-button>
                            </div>
                        </div>
                        <!-- 谢谢参与，再接再厉 -->
                        <div class="box" v-if="mainTab.current==2">
                            <div class="info" :style="{backgroundImage: 'url(' + descJson.noWinningJson.bgImage + ')' }">
                                <h3>谢谢参与，再接再厉</h3>
                                <div class="img">
                                    <img :src=" descJson.noWinningJson.noWinImage" alt />
                                </div>
                                <el-button class="btn" :style="{background: descJson.noWinningJson.aginButtonColor}">再来一次</el-button>
                            </div>
                        </div>
                        <!-- 编辑个人信息 -->
                        <div v-if="mainTab.current==3" class="box">
                            <div class="info lotteryRuleForm" :style="{backgroundImage: 'url(' + descJson.editUserInfoJson.bgImage + ')' }">
                                <h3>编辑个人信息</h3>
                                <el-form :model="lotteryRuleForm" :rules="lotteryRules" ref="lotteryRuleForm" label-width="84px" label-position="right">
                                    <el-form-item prop="name">
                                        <span slot="label" class="label" :style="{background:descJson.editUserInfoJson.confirmButtonColor}">姓名</span>
                                        <el-input v-model="lotteryRuleForm.name" clearable placeholder="请输入真实姓名"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="mobile">
                                        <span slot="label" class="label" :style="{background:descJson.editUserInfoJson.confirmButtonColor}">手机号</span>
                                        <el-input v-model.number="lotteryRuleForm.mobile" clearable maxlength="11" placeholder="请输入联系手机号"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="email">
                                        <span slot="label" class="label" :style="{background:descJson.editUserInfoJson.confirmButtonColor}">
                                            邮寄
                                            <br />地址
                                        </span>
                                        <el-input type="textarea" :rows="4" v-model="lotteryRuleForm.email" clearable placeholder="请输入邮寄详细地址"></el-input>
                                    </el-form-item>
                                </el-form>
                                <el-button class="btn" :style="{background:descJson.editUserInfoJson.confirmButtonColor}">再来一次</el-button>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
            <!-- 新增按钮 -->
            <div class="add">
                <el-button @click="addDomain" :disabled="addButtonDisabled" class="resetButton">新增设置项</el-button>
                <el-tooltip effect="dark" content="奖项最少3个，最多增加至10个" placement="right">
                    <span class="tipsInfo">!</span>
                </el-tooltip>
            </div>
        </div>

        <!-- 第三部 提交审核 -->
        <div class="tab-container tab-success createSet" v-if="active == 3">
            <div class="titleInfo">
                <img src="/static/images/success.png" />
                <span class="font20">创建成功!</span>
            </div>
            <div class="step-button2">
                <el-button type="primary" plain @click="viewList" class="resetButton">查看抽奖活动列表</el-button>
                <kt-button class="searchButton" label="提交审核" :size="size" v-show="status==1" perms="market:lottery:submit" @click="submitReview(0)" />
                <kt-button class="searchButton" label="审核" :size="size" v-show="status==2" perms="market:lottery:verify" @click="review(1)" />
            </div>
        </div>
    </div>

    <!-- 底部按钮 -->
    <div class="step-button">
        <el-button type="primary" v-if="active == 2" :plain="active != 1 && active != 4" @click="upStep" class="cancelButton">上一步</el-button>
        <el-button type="primary" v-if="active != 3" @click="next" class="searchButton">下一步</el-button>
    </div>

    <!-- 添加商品弹窗 -->
    <el-dialog :visible.sync="dialogProductVisible" title="添加商品" :close-on-click-modal="false">
        <el-form :inline="true" v-model="formInline" class="addGoodsForm">
            <el-row class="mb30">
                <el-form-item label="商品名称：">
                    <el-input clearable v-model="formInline.goodsName" placeholder="商品名称" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item label="商品编码：">
                    <el-input clearable v-model="formInline.code" placeholder="商品编码" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item label="商品分类：">
                    <el-input clearable v-model="formInline.goodsCategory" placeholder="商品分类" maxlength="80"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="所属商户：">
                    <el-select v-model="formInline.merchantId" filterable placeholder="请选择" clearable>
                        <el-input clearable v-model="formInline.goodsCategory" placeholder="商品分类" maxlength="80"></el-input>
                    </el-select>
                </el-form-item>
            </el-row>
            </el-form>
        <el-row class="mb30 mt20 t_r">
            <el-button class="searchButton" icon="el-icon-search" @click="searchQueryPageProductManagement">查询</el-button>
            <el-button class="resetButton" icon="el-icon-refresh" @click="restForm">重置</el-button>
        </el-row>
        <div class="table-section">
            <el-table :data="productData" v-loading="productListloading" :header-cell-style="tableHeaderColor" ref="multipleTable" :row-class-name="tableRowClassName" :size="size">
                <!-- <el-table-column prop="thirdSkuId" label="商品ID" sortable align="center"></el-table-column> -->
                <el-table-column prop="code" label="商品编码" align="center"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="goodsCategory" label="商品类目" align="center"></el-table-column>
                <el-table-column prop="merchantName" label="所属商户" align="center"></el-table-column>
                <el-table-column prop="merchantCode" label="商户code" align="center"></el-table-column>
                <el-table-column prop="salePrice" label="零售价（元）" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button :size="size" @click="selectProduct(scope.row,markProFlag)" type="text">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="productData.length > 0" class="t_r">
                <el-pagination @size-change="producthandleSizeChange" @current-change="producthandleCurrentChange" :current-page="formInline.start" :page-sizes="[10]" :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="productListTotal"></el-pagination>
            </div>
        </div>
        <div slot="footer" class="dialog-footer  ">

            <el-button @click="dialogProductVisible=false" size="mini">取消</el-button>
        </div>
    </el-dialog>

    <!--优惠券弹窗-->
    <el-dialog :title="'添加优惠券'" :inline="true" :visible.sync="dialogCouponVisible" :close-on-click-modal="false">
        <div class="flex">
            <el-form :size="size" :inline="true" class="addGoodsForm">
                <el-form-item label="券活动名称：">
                    <el-input clearable v-model="promName" placeholder="券活动名称" maxlength="80"></el-input>
                </el-form-item>
            </el-form>
            <el-row class="t_r mb30">
                <el-button type="primary" plain @click="resetForm('filters')" class="resetButton" icon="el-icon-refresh">重置</el-button>
                <kt-button icon="el-icon-search" :label="'搜索'" class="searchButton" @click="searchQueryPageCouponList" />

            </el-row>
        </div>
        <el-table :data="couponDataList">
            <el-table-column fixed prop="id" label="优惠券活动ID"></el-table-column>
            <el-table-column fixed prop="promName" label="优惠券名称"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="selectCoupon(scope.row,markProFlag)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="productData.length > 0" class="t_r">
            <el-pagination @size-change="couponHandleSizeChange" @current-change="couponHandleCurrentChange" :current-page="couponformInline.start" :page-sizes="[10]" :page-size="couponformInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="couponDataListTotal"></el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button :size="size" @click.native="dialogCouponVisible = false" class="cancelButton">取消</el-button>
        </div>
    </el-dialog>

    <!-- 审核弹窗 -->
    <el-dialog title="审核" :visible.sync="verifyDialogFormVisible" class="el-dialog-style" :close-on-click-modal="false">
        <el-form :model="verifyForm" ref="verifyForm" :rules="verifyFormRules">
            <el-form-item prop="auditRemark" label="审核意见：" :required="false" :show-message="true" >
                <el-input clearable v-model.trim="verifyForm.auditRemark" autocomplete="off" type="textarea" rows="6"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" plain @click="reviewDialogNo(4)" size="mini" class="cancelButton">不通过</el-button>
            <el-button type="primary" @click="reviewDialog(11)" size="mini" class="searchButton">通过</el-button>
        </div>
    </el-dialog>

    <!-- 奖品名称 -->
    <el-dialog title="查看奖品" :visible.sync="awardsRefNameVisible" class="awardsRefNameVisible" :close-on-click-modal="false">
        <div class="table-section" v-if="showGoods">
            <el-table :data="awardsRefNameForm" :header-cell-style="tableHeaderColor" ref="multipleTable" :row-class-name="tableRowClassName" :size="size">
                <el-table-column prop="code" label="商品ID" sortable align="center"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="goodsCategory" label="商品分类" align="center"></el-table-column>
                <el-table-column prop="merchantName" label="所属商户" align="center"></el-table-column>
                <el-table-column prop="salePrice" label="原价（元）" align="center"></el-table-column>
            </el-table>
        </div>
        <el-table :data="awardsRefNameForm" :header-cell-style="tableHeaderColor" ref="multipleTable" :row-class-name="tableRowClassName" :size="size" v-else>
            <el-table-column fixed prop="id" label="优惠券活动ID"></el-table-column>
            <el-table-column fixed prop="promName" label="优惠券名称"></el-table-column>
        </el-table>
        <el-button type="primary" plain @click="awardsRefNameVisible=false" class="searchButton">确定</el-button>
    </el-dialog>
</div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import {
    format
} from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
    darkmagenta
} from "color-name";
import {
    quillEditor
} from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import marketRequest from "@/market/request/marketRequest";
import $ from "@/assets/js/jquery.min.js";
import turntable from "@/assets/js/turntable.js";
export default {
    name: "Tab",
    components: {
        KtButton,
        TableColumnFilterDialog,
        quillEditor
    },
    data() {

        //活动规则-无订单抽奖-每次抽奖需消耗验证
        var checkDrawPointsPerTime = (rule, value, callback) => {
            if (this.lotteryInfoForm.lotteryType == 1) {
                if (!value) {
                    callback(new Error("请输入每次抽奖所需消耗"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };

        //活动规则-订单抽奖-单次消费订单金额
        var checkOrderDrawAmountOne = (rule, value, callback) => {
            if (
                this.lotteryInfoForm.orderDrawType == 1 &&
                this.lotteryInfoForm.lotteryType == 2
            ) {
                if (!value) {
                    callback(new Error("请输入单次消费订单金额"));
                } else if (Number(value) <= 0) {
                    callback(new Error("订单金额支持输入小数后两位、大于0的正数"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };

        //活动规则-订单抽奖-消费订单金额每满
        var checkOrderDrawAmountTwo = (rule, value, callback) => {
            if (
                this.lotteryInfoForm.orderDrawType == 2 &&
                this.lotteryInfoForm.lotteryType == 2
            ) {
                if (!value) {
                    callback(new Error("请输入消费订单金额"));
                } else if (Number(value) <= 0) {
                    callback(new Error("订单金额支持输入小数后两位、大于0的正数"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };

        //活动规则-订单抽奖-累计消费订单金额
        var checkOrderDrawAmountThree = (rule, value, callback) => {
            if (
                this.lotteryInfoForm.orderDrawType == 3 &&
                this.lotteryInfoForm.lotteryType == 2
            ) {
                if (!value) {
                    callback(new Error("请输入累计消费订单金额"));
                } else if (Number(value) <= 0) {
                    callback(new Error("订单金额支持输入小数后两位、大于0的正数"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };

        //活动规则-订单抽奖-单次消费订单金额-每次抽奖需消耗
        var checkDrawTimesPerOrderOne = (rule, value, callback) => {
            if (
                this.lotteryInfoForm.orderDrawType == 1 &&
                this.lotteryInfoForm.lotteryType == 2
            ) {
                if (!value) {
                    callback(new Error("抽奖次数支持输入正整数"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };

        //活动规则-订单抽奖-消费订单金额每满-每次抽奖需消耗
        var checkDrawTimesPerOrderTwo = (rule, value, callback) => {
            if (
                this.lotteryInfoForm.orderDrawType == 2 &&
                this.lotteryInfoForm.lotteryType == 2
            ) {
                if (!value) {
                    callback(new Error("抽奖次数支持输入正整数"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };

        //活动规则-订单抽奖-累计消费订单金额-每次抽奖需消耗
        var checkDrawTimesPerOrderThree = (rule, value, callback) => {
            if (
                this.lotteryInfoForm.orderDrawType == 3 &&
                this.lotteryInfoForm.lotteryType == 2
            ) {
                if (!value) {
                    callback(new Error("抽奖次数支持输入正整数"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        /**
         * 新老用户
         */
        var checkUserType = (rule, value, callback) => {
            if (this.selectUserType == null || this.selectUserType.length < 1) {
                return callback(new Error("请选择新老用户"));
            }
            return callback();
        };
        /**
         * 会员类型
         */
        var checkMemType = (rule, value, callback) => {
            if (this.selectMemTypes == null || this.selectMemTypes.length < 1) {
                return callback(new Error("请选择会员类型"));
            }
            return callback();
        };
        /**
         * 渠道入口
         */
        var checkChannelCodes = (rule, value, callback) => {
            if (this.selectChannelCodes == null || this.selectChannelCodes.length < 1) {
                return callback(new Error("请选择渠道入口"));
            }
            return callback();
        };
        var checkWaringNum = (rule, value, callback) => {
            if(value && Number(value) > 100){
                return callback(new Error("必须小于等于100%"));
            }else{
                return callback();
            }
        };
        return {
            // 活动时间校验
            timeCheck: {
                disabledDate: time => {
                    if (this.promotionStartEndTime) {
                        return (
                            time.getTime() < Date.now() - 8.64e7 ||
                            time.getTime() > new Date(this.promotionStartEndTime).getTime()
                        );
                    } else {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                }
            },
            lotteryInfoForm: {
                warningProportion:null,
                activityBudget:null,
                activitySearch:null,
                lotteryType: 1,
                lotteryTemplate: "1",
                costAllocationFlag: "1",
                channelIds: [],
                storeArea: "0",
                userArea: "0",
                proUserType: "0",
                orderDrawType: 1,
                lotteryAwardsList: [],
                promotionStartEndTime: [],
                dailyDrawTimesLimit: 1,
                dailyWinningTimesLimit: 1,
                orderDrawAmountOne: "",
                orderDrawAmountTwo: "",
                orderDrawAmountThree: "",
                drawTimesPerOrderOne: "",
                drawTimesPerOrderTwo: "",
                drawTimesPerOrderThree: ""
            }, // 页面model
            // 奖项等级list
            awardsLevelList: [
                {id: 1, name: "一等奖"},
                {id: 2, name: "二等奖"},
                {id: 3, name: "三等奖"},
                {id: 4, name: "四等奖"},
                {id: 5, name: "五等奖"},
                {id: 6, name: "六等奖"}
            ],
            //奖项分类list
            awardsCategoryList: [{ id: 1, name: "谢谢参与" }, { id: 2, name: "商品"}, { id: 3, name: "优惠券" }, { id: 4, name: "积分" } ],
            formLabelWidth: "120px",
            deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
            formLabelWidth: "120px",
            dialogProductVisible: false, // 商品弹窗控制
            dialogCouponVisible: false, // 优惠券弹窗控制
            tabsIndex: "first",
            formInline: {
                code: "",
                goodsName: "",
                goodsCategory: "",
                start: 1,
                limit: 10
            },
            merchantIdList: [],
            //商品弹窗 查询参数
            couponformInline: {
                start: 1,
                limit: 10
            },
            //优惠券弹窗查询参数
            productListloading: true, // 商品loading
            couponListloading: true, // 优惠券loading
            markProFlag: "", // 记录是哪个表单关联数据
            productData: [],
            couponDataList: [],
            promName: "",
            checkAll: false,
            dynamicValidateForm: {}, // 第二部表单部分数据
            formDataList: [], // 页面中的表单数据
            // explainData: {
            //   notWinningDesc: ""
            // }, // 第二步未中奖说明表单数据
            editorOption: {}, // 第一步活动描述数据
            size: "small", // 表单尺寸
            search: false, // 暂时未找到对应数据
            active: this.$route.params.auth == null ? 1 : this.$route.params.auth, // 底部按钮状态（判断上一步  下一步 按钮显示）
            // 设置抽奖规则验证
            lotteryInfoFormRules: {
                activitySearch: [{ required: true, message: "请输入搜索词", trigger: "blur" }],
                activityBudget: [ { required: true, message: "请输入活动预算", trigger: "blur" }],
                activityName: [{required: true, message: "请输入活动名称", trigger: "blur"},
                    {min: 3, max: 60, message: "长度在 3 到 60 个字符", trigger: "blur"}
                ],
                promotionStartEndTime: [{ required: true, message: "请选择时间", trigger: "blur"}],
                lotteryTemplate: [{ required: true, message: "请选择抽奖形式",trigger: "change"}],
                proUserType: [{
                    required: true,
                    message: "请选择用户类型",
                    trigger: "change"
                }],
                storeArea: [{
                    required: true,
                    message: "请选择店铺地址",
                    trigger: "change"
                }],
                userArea: [{
                    required: true,
                    message: "请选择商家地址",
                    trigger: "change"
                }],
                orderDrawAmountOne: [{
                    required: true,
                    validator: checkOrderDrawAmountOne,
                    trigger: "blur"
                }],
                orderDrawAmountTwo: [{
                    required: true,
                    validator: checkOrderDrawAmountTwo,
                    trigger: "blur"
                }],
                orderDrawAmountThree: [{
                    required: true,
                    validator: checkOrderDrawAmountThree,
                    trigger: "blur"
                }],
                drawTimesPerOrderOne: [{
                    validator: checkDrawTimesPerOrderOne,
                    trigger: "blur"
                }],
                drawTimesPerOrderTwo: [{
                    validator: checkDrawTimesPerOrderTwo,
                    trigger: "blur"
                }],
                drawTimesPerOrderThree: [{
                    validator: checkDrawTimesPerOrderThree,
                    trigger: "blur"
                }],
                selectUserType: [{
                    required: true,
                    validator: checkUserType,
                    trigger: "change"
                }],
                selectMemTypes: [{
                    required: true,
                    validator: checkMemType,
                    trigger: "change"
                }],
                selectChannelCodes: [{
                    required: true,
                    validator: checkChannelCodes,
                    trigger: "change"
                }],
                warningNum:[
                    { required:false, validator:checkWaringNum, trigger:"blur" },
                    { required:false, validator:checkWaringNum, trigger:"change" }
                ],
            },
            verifyDialogFormVisible: false, // 是否显示审核弹窗
            verifyForm: {
                auditRemark: ""
            }, // 弹窗审核验证
            verifyFormRules: {
                auditRemark: [{
                    required: true,
                    message: "审核意见不能为空",
                    trigger: "blur"
                }]
            },

            id: this.$route.params.id, // 当前活动ID
            status: 0, // 提交审核步骤状态判断
            showNewAddDialog: false, // 是否显示新增form
            addButtonDisabled: false, // 新增form表单按钮是都禁用（到达10个表单的时候禁止新增）
            couponDataListTotal: "", // 优惠券弹窗列表分页总条数
            //选择H5模板
            selectBoard: {
                value: "1",
                options: []
            },

            //活动规则：
            actRule: {
                launchChannels: "",
                desc: "",
                default: `
1、每日登陆可获得3次免费抽奖机会，仅限当天有效，过期作废；
2、可使用积分抽奖，每10个积分兑换一次大转盘机会；
3、获得的奖品将在五个工作日内，由平台免费邮寄到指定地址；
4、抽奖活动时间：2020-7-1 至2020-7-30`,
                type: [],
                typeRule: false,
                androidAdd: "",
                iosAdd: "",
                h5Add: "",
                androidVal: true,
                iosVal: true,
                h5Val: true,
                placeholder: `
请输入活动规则

例如：
1、每日登陆可获得3次免费抽奖机会，仅限当天有效，过期作废；
2、可使用积分抽奖，每10个积分兑换一次大转盘机会；
3、获得的奖品将在五个工作日内，由平台免费邮寄到指定地址；
4、抽奖活动时间：2020-7-1 至2020-7-30`
            },
            actRules: {
                desc: [{
                    required: true,
                    message: "请填写活动规则",
                    trigger: "blur"
                }],
                type: [{
                    type: "array",
                    required: true,
                    message: "请至少选择一个活动性质",
                    trigger: "change"
                }]
            },

            //选项
            mainTab: {
                current: 0,
                list: [{
                        id: 1,
                        name: "首页"
                    },
                    {
                        id: 2,
                        name: "中奖页面"
                    },
                    {
                        id: 3,
                        name: "没中奖页面"
                    },
                    {
                        id: 4,
                        name: "编辑个人信息"
                    }
                ]
            },
            lotteryRuleForm: {
                name: "",
                mobile: "",
                email: ""
            },
            lotteryRules: {
                name: [{
                        required: true,
                        message: "请输入真实姓名",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    }
                ],
                mobile: [{
                    required: true,
                    message: "请输入联系手机号",
                    trigger: "blur"
                }],
                email: [{
                        required: true,
                        message: "请输入邮箱地址",
                        trigger: "blur"
                    },
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"]
                    }
                ]
            },
            wheelSurf: "", //转盘
            list: {},
            angel: 0, //角度
            throttle: true, //是否在转动
            imgUpload: this.utils.imgUploadUrl, //上传地址
            awardsRefNameForm: [], //查看奖品
            awardsRefNameVisible: false, //奖品名称查看
            showGoods: false, //显示商品或者优惠券
            right: "right",
            descJson: {
                homeJson: {
                    mainBgImage: require("../../../../static/images/lottery/homeBg.png"),
                    drawButtonColor: "#ef5851",
                    turntableColor: "#fb554d"
                },
                winningJson: {
                    editUserInfoButtonColor: "#f55a5c",
                    winImage: require("../../../../static/images/lottery/gift.png"),
                    bgImage: require("../../../../static/images/lottery/giftbg.png")
                },
                noWinningJson: {
                    aginButtonColor: "#f55a5c",
                    noWinImage: require("../../../../static/images/lottery/thanks.png"),
                    bgImage: require("../../../../static/images/lottery/giftbg.png")
                },
                editUserInfoJson: {
                    confirmButtonColor: "#f55a5c",
                    bgImage: require("../../../../static/images/lottery/giftbg.png")
                }
            }, //配置的图片
            reloadMemLevel: true,

            //新老用户
            userTypeCheckAll: true,
            selectUserType: [1, 2],
            userTypeIsIndeterminate: false,
            //会员类型
            memTypeCheckAll: true,
            selectMemTypes: [1, 2 , 3],
            memTypeIsIndeterminate: false,
            //渠道入口
            channelCodesCheckAll: true,
            channelCodesIsIndeterminate: false,
            selectChannelCodes: [1],
            pageTemplateId: "",
            imageAccept: ".jpg,.png,.bmp,.gif,.JPG,.PNG,.GIF,.BMP", //图片上传格式jpg\bmp\png\gif
        };
    },

    methods: {
        //新老用户
        handleCheckAllUserTypeChange(val) {
            this.selectUserType = val ? [1, 2] : [];
            this.userTypeIsIndeterminate = false;
        },
        handleCheckedUserTypeChange(value) {
            let checkedCount = value.length;
            this.userTypeCheckAll = checkedCount === 2;
            this.userTypeIsIndeterminate = checkedCount > 0 && checkedCount < 2;
        },
        //会员类型
        handleCheckAllMemTypeChange(val) {
            this.selectMemTypes = val ? [1, 2, 3] : [];
            this.memTypeIsIndeterminate = false;
        },
        handleCheckedMemTypeChange(value) {
            let checkedCount = value.length;
            this.memTypeCheckAll = checkedCount === 3;
            this.memTypeIsIndeterminate = checkedCount > 0 && checkedCount < 3;
        },
        //渠道入口
        handleCheckAllChannelCodes(val) {
            this.selectChannelCodes = val ? [1] : [];
            this.channelCodesIsIndeterminate = false;
        },
        handleCheckedChannelCodes(value) {
            let checkedCount = value.length;
            this.channelCodesCheckAll = checkedCount === 1;
            this.channelCodesIsIndeterminate = checkedCount > 0 && checkedCount < 1;
        },
        getUuid() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = "-";

            var uuid = s.join("");
            return uuid;
        },

        //抽奖类型更改 清空数据
        lotteryTypeChange(val) {
            if (val == 2) {
                this.lotteryInfoForm.dailyDrawTimesLimit = 1;
                this.lotteryInfoForm.dailyWinningTimesLimit = 1;
            } else {
                this.lotteryInfoForm.orderDrawType = 1;
                this.lotteryInfoForm.orderDrawAmountOne = "";
                this.lotteryInfoForm.orderDrawAmountTwo = "";
                this.lotteryInfoForm.orderDrawAmountThree = "";
                this.lotteryInfoForm.drawTimesPerOrderOne = "";
                this.lotteryInfoForm.drawTimesPerOrderTwo = "";
                this.lotteryInfoForm.drawTimesPerOrderThree = "";
            }
        },
        //订单抽奖 清空数据
        orderDrawTypeChange() {
            this.lotteryInfoForm.orderDrawAmountOne = "";
            this.lotteryInfoForm.orderDrawAmountTwo = "";
            this.lotteryInfoForm.orderDrawAmountThree = "";
            this.lotteryInfoForm.drawTimesPerOrderOne = "";
            this.lotteryInfoForm.drawTimesPerOrderTwo = "";
            this.lotteryInfoForm.drawTimesPerOrderThree = "";
        },
        //商家数据查询
        queryMerchantPageOther() {
            var that = this;
            this.utils.request.queryMerchantPageOther({}, res => {
                if (res.code == "0000" && res.data && res.data.length > 0) {
                    that.merchantIdList = res.data;
                }
            });
        },

        // 初始化活动奖项
        initFormDataList(id) {
            let that = this;
            if (that.id != 0) {} else {
                // 如果id为0 说明是新增的活动 手动往表单列表中添加6个
                for (let i = 0; i < 6; i++) {
                    this.formDataList.push({
                        formId: i + 1,
                        awardsLevel: i + 1,
                        awardsCategory: 1,
                        awardsName: "",
                        awardsPicUrl: "http://mss.cosmoplat.com/yxzx-public-test/83a839da41a54dd787b876bfc7e4e07e.png",
                        awardsRefId: "",
                        awardsRefName: "奖品" + Number(i + 1),
                        awardsRefNum: 0,
                        awardsRefPicUrl: "",
                        createTime: "",
                        creator: 0,
                        creatorName: "",
                        deleteFlag: "0",
                        deptid: 0,
                        id: "",
                        isAvailable: 0,
                        merchantId: 0,
                        storeId: 0,
                        themeRefId: "",
                        updateTime: null,
                        updator: 0,
                        updatorName: "",
                        winningNum: 0,
                        winningRate: 0
                    });
                }
            }
            if (id != null) {
                this.lotteryInfoForm.labelId = id;
            }
        },

        // 下一步
        next() {
            var flag = true;
            //设置抽奖规则验证
            if (this.active == 1) {
                this.$refs["lotteryInfoForm"].validate(valid => {
                    if (valid) {
                        let that = this;
                        //处理数据 根据订单抽奖类型 取不同的值
                        if (
                            this.lotteryInfoForm.lotteryType == 2 &&
                            this.lotteryInfoForm.orderDrawType == 1
                        ) {
                            this.lotteryInfoForm.orderDrawAmount = this.lotteryInfoForm.orderDrawAmountOne;
                            this.lotteryInfoForm.drawTimesPerOrder = this.lotteryInfoForm.drawTimesPerOrderOne;
                        } else if (
                            this.lotteryInfoForm.lotteryType == 2 &&
                            this.lotteryInfoForm.orderDrawType == 2
                        ) {
                            this.lotteryInfoForm.orderDrawAmount = this.lotteryInfoForm.orderDrawAmountTwo;
                            this.lotteryInfoForm.drawTimesPerOrder = this.lotteryInfoForm.drawTimesPerOrderTwo;
                        } else if (
                            this.lotteryInfoForm.lotteryType == 2 &&
                            this.lotteryInfoForm.orderDrawType == 3
                        ) {
                            this.lotteryInfoForm.orderDrawAmount = this.lotteryInfoForm.orderDrawAmountThree;
                            this.lotteryInfoForm.drawTimesPerOrder = this.lotteryInfoForm.drawTimesPerOrderThree;
                        }
                        this.lotteryInfoForm.effStartTime = this.lotteryInfoForm.promotionStartEndTime[0];
                        this.lotteryInfoForm.effEndTime = this.lotteryInfoForm.promotionStartEndTime[1];

                        if (new Date() > new Date(this.lotteryInfoForm.effStartTime)) {
                            this.$message({
                                message: "草稿状态开始活动时间不能小于当前时间"
                            });
                            flag = false;
                            return false;
                        }

                        //新老用户
                        this.lotteryInfoForm.proUserType = this.selectUserType.join(",");
                        //会员类型
                        this.lotteryInfoForm.proMemberType = this.selectMemTypes.join(",");
                        //会员类型
                        this.lotteryInfoForm.channelCodes = this.selectChannelCodes.join(",");

                        if (this.id != 0) {
                            this.lotteryInfoForm.id = this.id;
                            this.utils.request.updateLotteryActivity(
                                this.lotteryInfoForm,
                                res => {
                                    if (res.code == "0000") {
                                        that.addActive();
                                        that.turntableFindAllFun(this.lotteryInfoForm.id);
                                        that.setLaunchChannels();
                                        flag = true;
                                        this.getAngel();
                                    } else {
                                        flag = false;
                                        that.$message({
                                            message: "操作失败, " + res.msg,
                                            type: "error"
                                        });
                                    }
                                }
                            );
                        } else {
                            this.utils.request.saveLotteryActivity(
                                this.lotteryInfoForm,
                                res => {
                                    if (res.code == "0000") {
                                        that.lotteryInfoForm.id = res.data;
                                        that.id = res.data;
                                        that.status = 1;
                                        flag = true;
                                        that.addActive();
                                        that.turntableFindAllFun(that.lotteryInfoForm.id);
                                        that.setLaunchChannels();
                                        that.getAngel();
                                    } else {
                                        flag = false;
                                        that.$message({
                                            message: "操作失败, " + res.msg,
                                            type: "error"
                                        });
                                    }
                                }
                            );
                        }
                    } else {
                        flag = false;
                        return false;
                    }
                });
            } else if (this.active == 2) {
                // 奖品设置
                /*
                 * 一： 如果奖品类别选择的不是 谢谢惠顾  奖品名称  奖品数量 中奖率不能为空
                 * 二： 如果奖品类别选择的是 商品  商品名称和商品ID 不能为空
                 * 三： 如果奖品类别选择的是 优惠券
                 * 四： 如果奖品类别选择的是 积分
                 */
                let list = this.formDataList; // 全部表单数据
                let levelFlag = false; // 验证几等奖是否重复
                let flagList = []; // 将每个表单中的奖项放在数组中，判断是否有重复的数据
                let total = 0; // 验证中奖率总额是不是 100 使用
                try {
                    list.forEach(item => {
                        total += Number(item.winningRate);
                        flagList.push(item.awardsLevel);

                        // 判断中奖率不能为空  不能为 0 不能为100
                        if (Number(item.winningRate) <= 0) {
                            flag = false;
                            throw new Error("中奖率不能小于等于0");
                        }

                        if (Number(item.winningRate) >= 100) {
                            flag = false;
                            throw new Error("中奖率不能大于等于100");
                        }

                        // 奖项是商品的时候 商品名称和id不能为空
                        if (item.awardsCategory == 2) {
                            if (item.awardsRefName == "" || item.awardsRefId == "") {
                                flag = false;
                                throw new Error("请选择要绑定的商品");
                            }

                        }

                        // 奖项是优惠券的时候 优惠券名称和id不能为空
                        if (item.awardsCategory == 3) {
                            if (item.awardsRefName == "" || item.awardsRefId == "") {
                                flag = false;
                                throw new Error("请选择要绑定的优惠券");
                            }
                        }
                        // 奖品类别不是谢谢惠顾的时候  检测 奖品数量   （奖品名称再 商品和优惠券中单独判断）
                        // if (item.awardsCategory != 1) {
                        //   if (Number(item.winningNum) == 0) {
                        //     flag = false;
                        //     throw new Error("奖品数量不能为0");
                        //   }
                        // }

                        // 奖项是积分的时候  积分应该大于0
                        if (item.awardsCategory == 4) {
                            if (Number(item.awardsRefNum) <= 0) {
                                flag = false;
                                throw new Error("积分必须大于0");
                            }
                            if (item.awardsRefName == "") {
                                flag = false;
                                throw new Error("积分奖品名称不能为空");
                            }
                        }
                    });
                } catch (e) {
                    return this.$message({
                        message: e.message,
                        type: "error"
                    });
                }

                // 判断奖项是否有重复
                let array = flagList.sort();
                for (var i = 0; i < flagList.length; i++) {
                    if (array[i] == array[i + 1]) {
                        levelFlag = true;
                    }
                }
                if (levelFlag) {
                    flag = false;
                    return this.$message({
                        message: "奖项等级不能重复",
                        type: "error"
                    });
                }

                // 判断中奖率之和是否等于100
                if (total != 100) {
                    flag = false;
                    return this.$message({
                        message: "各奖项中奖率之和必须等于100",
                        type: "error"
                    });
                }
                if (this.selectBoard.value) {

                    // 活动规则必填
                    if (!this.actRule.launchChannels) {
                        flag = false;
                        return this.$message({
                            message: "请选择投放渠道",
                            type: "error"
                        });
                    }
                    if (
                        this.actRule.androidVal &&
                        (this.actRule.androidAdd == "" || this.actRule.androidAdd == null)
                    ) {
                        flag = false;
                        return this.$message({
                            message: "请输入APP安卓端登录地址",
                            type: "error"
                        });
                    }
                    if (
                        this.actRule.iosVal &&
                        (this.actRule.iosAdd == "" || this.actRule.iosAdd == null)
                    ) {
                        flag = false;
                        return this.$message({
                            message: "请输入APP苹果端登录地址",
                            type: "error"
                        });
                    }
                    if (
                        this.actRule.h5Val &&
                        (this.actRule.h5Add == "" || this.actRule.h5Add == null)
                    ) {
                        flag = false;
                        return this.$message({
                            message: "请输入H5端登录地址",
                            type: "error"
                        });
                    }
                }

                // 提交表单
                let params = {};
                if (this.selectBoard.value) {
                    params = {
                        lotteryAwardsList: this.formDataList, // 活动数据
                        themeRefId: this.$route.params.id,
                        pageTemplateId: this.selectBoard.value, //选择模板
                        activityRule: this.actRule.desc ? this.actRule.desc : this.actRule.default, //活动规则字段
                        launchChannels: this.actRule.launchChannels,
                        androidLink: this.actRule.androidAdd,
                        iosLink: this.actRule.iosAdd,
                        h5Link: this.actRule.h5Add
                    };
                } else {
                    params = {
                        lotteryAwardsList: this.formDataList, // 活动数据
                        themeRefId: this.$route.params.id
                    };
                }
                if (
                    this.id != 0 &&
                    this.lotteryInfoForm.lotteryAwardsList.length != 0 &&
                    flag == true
                ) {
                    this.utils.request.updateLotteryAwards(params, res => {
                        if (res.code == "0000") {
                            this.lotteryInfoForm.status = res.data;
                            flag = true;
                            this.getLotteryThemeInfo();
                            this.addActive();
                        } else {
                            flag = false;
                            this.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                        }
                    });
                } else {
                    this.utils.request.saveLotteryAwards(params, res => {
                        if (res.code == "0000") {
                            this.lotteryInfoForm.status = res.data;
                            flag = true;
                            this.getLotteryThemeInfo();
                            this.addActive();
                        } else {
                            flag = false;
                            this.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                        }
                    });
                }
                // this.active = 3
            }

            // 提交审核
            else if (this.active == 3) {
                this.$message({
                    message: "操作成功,请等待审核",
                    type: "success"
                });
                return;
            }
        },

        addActive() {
            this.active = parseInt(this.active) + 1;
            this.$router.push({
                params: {
                    id: this.id,
                    auth: this.active
                }
            });
            if (this.active > 3) {
                this.$router.push({
                    path: "/pages/promotionManagement/lotteryRule"
                });
            }
        },
        // 上一步
        upStep() {
            this.active = parseInt(this.active) - 1;
            this.$router.push({
                params: {
                    id: this.id,
                    auth: this.active
                }
            });
        },

        // 返回抽奖列表
        viewList() {
            this.$router.push({
                path: "/pages/promotionManagement/lotteryRule"
            });
        },

        //提交审核
        submitReview: function (data) {
            this.$confirm("确定提交审核？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    let that = this;
                    this.utils.request.closeLotteryActivity({
                            id: that.id,
                            status: 2
                        },
                        res => {
                            that.status = 2;
                            that.$message({
                                message: "提交审核成功",
                                type: "success"
                            });
                        }
                    );
                })
                .catch(() => {});
        },

        // 审核
        review: function (data) {
            this.verifyDialogFormVisible = true;
            this.verifyForm.id = this.id;
            this.$nextTick(() => {
                this.$refs['verifyForm'].clearValidate();
            });
        },

        // 审核
        reviewDialog: function (data) {
            let that = this;
            this.verifyForm.verifyStatus = data;
            that.utils.request.verifyLotteryActivity(this.verifyForm, res => {
                if (res.code == "0000") {
                    that.verifyDialogFormVisible = false;
                    that.status = 0;
                    that.$message({
                        message: "审核完成",
                        type: "success"
                    });
                } else {
                    that.$message({
                        message: "审核失败",
                        type: "error"
                    });
                }
            });
        },
        reviewDialogNo: function (data) {
            this.$refs.verifyForm.validate((valid) => {
                if (valid) {
                    let that = this;
                    this.verifyForm.verifyStatus = data;
                    that.utils.request.verifyLotteryActivity(this.verifyForm, res => {
                        if (res.code == "0000") {
                            that.verifyDialogFormVisible = false;
                            that.status = 0;
                            that.$message({
                                message: "审核完成",
                                type: "success"
                            });
                        } else {
                            that.$message({
                                message: "审核失败",
                                type: "error"
                            });
                        }
                    });
                }
            });
        },

        // 第二部新增表单   新增的每一个表单中的输入框等表单元素的数据 新增的每一个表单的id
        addDomain() {
            this.showNewAddDialog = true;
            let formList = this.formDataList;
            formList.push({
                formId: Number(formList.length) + 1,
                awardsLevel: Number(formList.length) + 1,
                awardsCategory: 1,
                awardsName: "",
                awardsPicUrl: "http://mss.cosmoplat.com/yxzx-public-test/83a839da41a54dd787b876bfc7e4e07e.png",
                awardsRefId: "",
                awardsRefName: "奖品" + Number(formList.length + 1),
                awardsRefNum: 0,
                awardsRefPicUrl: "",
                createTime: "",
                creator: 0,
                creatorName: "",
                deleteFlag: "0",
                deptid: 0,
                id: "",
                isAvailable: 0,
                merchantId: 0,
                storeId: 0,
                themeRefId: "",
                updateTime: null,
                updator: 0,
                updatorName: "",
                winningNum: 0,
                winningRate: 0
            });

            // 添加到4个后禁用新增按钮 最多显示10个表单
            if (formList.length == 10) {
                this.addButtonDisabled = true;
            }

            // 往选项里面追加数据  保持form表单数和奖项一样
            let awardsLevelList = this.awardsLevelList;
            let tips = "";
            if (awardsLevelList.length == 3) {
                tips = "四等奖";
            }
            if (awardsLevelList.length == 4) {
                tips = "五等奖";
            }
            if (awardsLevelList.length == 5) {
                tips = "六等奖";
            }
            if (awardsLevelList.length == 6) {
                tips = "七等奖";
            }
            if (awardsLevelList.length == 7) {
                tips = "八等奖";
            }
            if (awardsLevelList.length == 8) {
                tips = "九等奖";
            }
            if (awardsLevelList.length == 9) {
                tips = "十等奖";
            }
            awardsLevelList.push({
                id: Number(awardsLevelList.length) + 1,
                name: tips
            });
            this.getAngel();
        },

        //删除新增表单
        removeDomain(item) {
            var index = this.formDataList.indexOf(item);

            if (index !== -1) {
                this.formDataList.splice(index, 1);
            }

            // 判断新增表单个数 是否禁用新增按钮
            if (this.formDataList.length < 10) {
                this.addButtonDisabled = false;
            }
            for (var i = 0; i < this.formDataList.length; i++) {
                this.formDataList[i].awardsLevel = i + 1;
            }
            // 删除奖项里的数据  保持和form数量一致
            this.awardsLevelList.pop();
            this.getAngel();
        },

        //奖品类别切换
        awardsCategoryChange(flag) {
            let list = this.formDataList;
            list.forEach(item => {
                if (item.formId == flag) {
                    item.awardsRefId = "";
                    item.awardsRefName = "";
                    item.awardsRefNum = 0;
                    item.winningNum = 0;
                }
            });
        },

        // 添加优惠券弹窗
        couponClick(flag) {
            this.markProFlag = flag;
            this.queryPageCouponList();
            this.dialogCouponVisible = true;
        },

        // 添加优惠券弹窗 重置按钮方法
        resetForm() {

            this.promName = "";
            this.queryPageCouponList();
        },
        searchQueryPageCouponList() {
            this.couponformInline.start = 1;
            this.queryPageCouponList();
        },
        // 查询优惠券列表
        queryPageCouponList() {
            let that = this;
            this.couponListloading = true;
            this.couponformInline.promName = this.promName;
            this.couponformInline.promType = 11;
            this.couponformInline.specialField = true;
            this.couponformInline.grantType = "33";
            this.utils.request.couponQueryConfigPage(this.couponformInline, res => {
                that.couponListloading = false;
                if (res.code == "0000") {
                    that.couponDataList = res.data.rows;
                    that.couponDataListTotal = res.data.total;
                }
            });
        },

        // 选择优惠券 绑定到对应的表单
        selectCoupon(row, flag) {
            this.awardsRefNameForm[0] = row;
            let list = this.formDataList;
            list.forEach(item => {
                if (item.formId == flag) {
                    item.awardsRefId = row.promotionId;
                    item.awardsRefName = row.promName;
                }
            });
            this.getAngel();
            this.dialogCouponVisible = !this.dialogCouponVisible;
        },

        // 优惠券条数刷新
        couponHandleSizeChange(val) {
            this.couponformInline.start = val;
            this.queryPageCouponList();
        },

        // 优惠券换页刷新
        couponHandleCurrentChange(val) {
            this.couponformInline.start = val;
            this.queryPageCouponList();
        },

        // 添加商品弹窗
        productClick(flag) {
            this.markProFlag = flag;
            this.formInline.goodsName = "";
            this.formInline.code = "";
            this.formInline.goodsCategory = "";
            this.queryPageProductManagement();
            this.dialogProductVisible = true;
        },

        // 添加商品弹窗 重置按钮方法
        restForm() {

            this.formInline.goodsName = "";
            this.formInline.skuId = null;
            this.formInline.goodsCategory = "";
            this.formInline.code = "";
            this.queryPageProductManagement();
            this.queryPageProductManagement();
        },
        searchQueryPageProductManagement() {
            this.formInline.start = 1;
            this.queryPageProductManagement();
        },
        // 查询商品列表
        queryPageProductManagement() {
            let that = this;
            this.productListloading = true;
            if (
                this.formInline.merchantId != null &&
                this.formInline.merchantId != ""
            ) {
                this.formInline.merchantIds = [];
                this.formInline.merchantIds.push(this.formInline.merchantId);
            } else {
                this.formInline.merchantIds = [];
            }
            if (this.formInline.storeId != null && this.formInline.storeId != "") {
                this.formInline.storeIds = [];
                this.formInline.storeIds.push(this.formInline.storeId);
            } else {
                this.formInline.storeIds = null;
            }
            marketRequest.promotionSpuPageByPromotionId(this.formInline, res=> {
                that.productListloading = false;
                if (res.code == "0000") {
                    if(res.data.rows == null || res.data.rows.length < 1){
                        that.productData = [];
                        that.productListTotal = 0;
                    }else{
                        that.productData = res.data.rows.map((ele, index) => {
                            let spu = {};
                            spu.id = ele.id;
                            spu.code = ele.code;
                            spu.goodsName = ele.chineseName;
                            spu.totalStock = ele.totalStock;
                            spu.goodsCategory = ele.fullNamePath;
                            spu.merchantName = ele.storeName;
                            spu.salePrice = ele.salePriceWithTax;
                            return spu;
                        });
                        that.productListTotal = Number(res.data.total);
                    }
                }
            });
        },

        // 商品条数刷新
        producthandleSizeChange(val) {
            this.formInline.start = val;
            this.queryPageProductManagement();
        },

        // 商品换页刷新
        producthandleCurrentChange(val) {
            this.formInline.start = val;
            this.queryPageProductManagement();
        },

        // 选择商品 绑定到对应的表单
        selectProduct(row, flag) {
            this.awardsRefNameForm[0] = row;
            let list = this.formDataList;
            list.forEach(item => {
                if (item.formId == flag) {
                    item.awardsRefId = row.id;
                    item.awardsRefName = row.goodsName;
                }
            });
            this.getAngel();
            this.dialogProductVisible = !this.dialogProductVisible;
        },

        //---------------------查询活动信息------------------------------//
        getLotteryThemeInfo() {
            var that = this;
            let params = {};
            params.id = that.id;
            this.utils.request.getLotteryThemeInfo(params, res => {
                if (res.code == "0000") {
                    this.pageTemplateId = res.data.pageTemplateId;
                    for (var key in res.data) {
                        that.$set(that.lotteryInfoForm, key, res.data[key]);
                    }
                    that.$set(that.lotteryInfoForm, "promotionStartEndTime", [
                        new Date(res.data["effStartTime"]),
                        new Date(res.data["effEndTime"])
                    ]);
                    that.lotteryInfoForm.proUserType = res.data.proUserType + "";
                    that.lotteryInfoForm.channelIds = [];
                    // that.explainData.notWinningDesc = res.data.notWinningDesc;
                    that.status = res.data.status;
                    that.turntableFindAllFun(that.id);
                    //新老用户
                    let selectUserType = [];
                    that.lotteryInfoForm.proUserType.split(",").forEach(item => {
                        selectUserType.push(Number(item));
                    });
                    that.selectUserType = selectUserType;
                    if (selectUserType.length < 2) {
                        this.userTypeIsIndeterminate = true;
                        this.userTypeCheckAll = false;
                    }
                    //会员类型
                    let selectMemTypes = [];
                    that.lotteryInfoForm.proMemberType.split(",").forEach(item => {
                        selectMemTypes.push(Number(item));
                    });
                    that.selectMemTypes = selectMemTypes;
                    if (selectMemTypes.length < 3) {
                        this.memTypeIsIndeterminate = true;
                        this.memTypeCheckAll = false;
                    }
                    //渠道入口
                    let selectChannelCodes = [];
                    that.lotteryInfoForm.channelCodes.split(",").forEach(item => {
                        selectChannelCodes.push(Number(item));
                    });
                    that.selectChannelCodes = selectChannelCodes;
                    if (selectChannelCodes.length < 1) {
                        this.channelCodesIsIndeterminate = true;
                        this.channelCodesCheckAll = false;
                    }
                    if (
                        that.lotteryInfoForm.lotteryType == 2 &&
                        that.lotteryInfoForm.orderDrawType == 1
                    ) {
                        that.lotteryInfoForm.orderDrawAmountOne =
                            that.lotteryInfoForm.orderDrawAmount;
                        that.lotteryInfoForm.drawTimesPerOrderOne =
                            that.lotteryInfoForm.drawTimesPerOrder;
                    }
                    if (
                        that.lotteryInfoForm.lotteryType == 2 &&
                        that.lotteryInfoForm.orderDrawType == 2
                    ) {
                        that.lotteryInfoForm.orderDrawAmountTwo =
                            that.lotteryInfoForm.orderDrawAmount;
                        that.lotteryInfoForm.drawTimesPerOrderTwo =
                            that.lotteryInfoForm.drawTimesPerOrder;
                    }
                    if (
                        that.lotteryInfoForm.lotteryType == 2 &&
                        that.lotteryInfoForm.orderDrawType == 3
                    ) {
                        that.lotteryInfoForm.orderDrawAmountThree =
                            that.lotteryInfoForm.orderDrawAmount;
                        that.lotteryInfoForm.drawTimesPerOrderThree =
                            that.lotteryInfoForm.drawTimesPerOrder;
                    }

                    that.lotteryInfoForm.orderDrawType = 1;

                    // 第二步骤中的表单数据赋值
                    if (res.data.lotteryAwardsList.length != 0) {
                        // 往选项里面追加数据  保持form表单数和奖项一样
                        let awardsLevelList = this.awardsLevelList;
                        let tips = "";
                        if (awardsLevelList.length <= res.data.lotteryAwardsList.length) {
                            tips = "四等奖";
                            awardsLevelList.push({
                                id: Number(awardsLevelList.length) + 1,
                                name: tips
                            });
                        }
                        if (awardsLevelList.length <= res.data.lotteryAwardsList.length) {
                            tips = "五等奖";
                            awardsLevelList.push({
                                id: Number(awardsLevelList.length) + 1,
                                name: tips
                            });
                        }
                        if (awardsLevelList.length <= res.data.lotteryAwardsList.length) {
                            tips = "六等奖";
                            awardsLevelList.push({
                                id: Number(awardsLevelList.length) + 1,
                                name: tips
                            });
                        }
                        if (awardsLevelList.length <= res.data.lotteryAwardsList.length) {
                            tips = "七等奖";
                            awardsLevelList.push({
                                id: Number(awardsLevelList.length) + 1,
                                name: tips
                            });
                        }
                        if (awardsLevelList.length <= res.data.lotteryAwardsList.length) {
                            tips = "八等奖";
                            awardsLevelList.push({
                                id: Number(awardsLevelList.length) + 1,
                                name: tips
                            });
                        }
                        if (awardsLevelList.length <= res.data.lotteryAwardsList.length) {
                            tips = "九等奖";
                            awardsLevelList.push({
                                id: Number(awardsLevelList.length) + 1,
                                name: tips
                            });
                        }
                        if (awardsLevelList.length <= res.data.lotteryAwardsList.length) {
                            tips = "十等奖";
                            awardsLevelList.push({
                                id: Number(awardsLevelList.length) + 1,
                                name: tips
                            });
                        }
                        that.formDataList = res.data.lotteryAwardsList;
                        for (var i = 0; i < that.formDataList.length; i++) {
                            that.formDataList[i].formId = i + 1;
                        }
                    } else if (res.data.lotteryAwardsList.length == 0) {
                        // 如果length为0 说明是新增的活动 手动往表单列表中添加6个
                        for (let i = 0; i < 6; i++) {
                            that.formDataList.push({
                                formId: i + 1,
                                awardsLevel: i + 1,
                                awardsCategory: 1,
                                awardsName: "",
                                awardsPicUrl: "http://mss.cosmoplat.com/yxzx-public-test/83a839da41a54dd787b876bfc7e4e07e.png",
                                awardsRefId: "",
                                awardsRefName: "奖品" + Number(i + 1),
                                awardsRefNum: 0,
                                awardsRefPicUrl: "",
                                createTime: "",
                                creator: 0,
                                creatorName: "",
                                deleteFlag: "0",
                                deptid: 0,
                                id: "",
                                isAvailable: 0,
                                merchantId: 0,
                                storeId: 0,
                                themeRefId: "",
                                updateTime: null,
                                updator: 0,
                                updatorName: "",
                                winningNum: 0,
                                winningRate: 0
                            });
                        }
                    }
                    that.setLaunchChannels();

                    this.getAngel();
                } else if (res.code == "9999") {
                    that.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            });
        },

        //--------------------样式-------------------------------//
        //table的双色条纹
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (rowIndex == 1) {
                return "warning-row";
            } else if (rowIndex == 3) {
                return "success-row";
            }
            return "";
        },

        //修改table header的背景色
        tableHeaderColor({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            if (rowIndex == 0) {
                return "background-color:rgb(250,250,250);";
            }
        },

        //修改奖品名称
        changeValue(value) {
            let obj = {
                code: "",
                goodsName: "",
                goodsCategory: "",
                storeName: "",
                salePrice: ""
            };
            this.awardsRefNameForm = [];
            this.getAngel();
        },

        imgUploadSuccess(response, file, fileList, index) {
            let val = response.data.imageUrl;
            this.$set(this.formDataList[index], "awardsPicUrl", val);
            this.getAngel();
        },

        //选择H5模板
        turntableFindAllFun(id) {
            let that = this;
            that.utils.request.turntableFindAll({
                themeId: id
            }, res => {
                if (res.code == "0000") {
                    that.selectBoard.options = res.data;
                    if (
                        that.id != 0 &&
                        that.lotteryInfoForm.lotteryAwardsList.length != 0 && that.pageTemplateId
                    ) {
                        if(that.selectBoard.options.length!=0){

                            let obj = that.selectBoard.options.filter(f => {
                                return f.id == that.pageTemplateId;
                            })[0];
                            that.selectBoard.value = obj.id;
                            that.selectBoardChanged(obj.id);
                        }else{
                            that.selectBoard.value = that.pageTemplateId;
                            that.selectBoardChanged(that.pageTemplateId);

                        }
                    }
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            });
        },

        selectBoardChanged(value) {
            // this.descJson = this.selectBoard.options.filter(f => {
            //     return f.id == value;
            // })[0].descJson;

            this.getAngel();
        },
        setLaunchChannels() {
            // getLotteryThemeInfo创建接口
            // getDeptJumpLinks编辑接口
            if (this.id != 0 && this.lotteryInfoForm.lotteryAwardsList.length != 0) {
                if (this.lotteryInfoForm.androidLink) {
                    this.actRule.androidAdd = this.lotteryInfoForm.androidLink;
                }
                if (this.lotteryInfoForm.h5Link) {
                    this.actRule.h5Add = this.lotteryInfoForm.h5Link;
                }
                if (this.lotteryInfoForm.iosLink) {
                    this.actRule.iosAdd = this.lotteryInfoForm.iosLink;
                }

                this.actRule.desc = this.lotteryInfoForm.activityRule;
                this.actRule.launchChannels = this.lotteryInfoForm.launchChannels;

                let launchChannels = this.actRule.launchChannels.split(",").toString();
                if (launchChannels == "1,2,3") {
                    this.actRule.androidVal = true;
                    this.actRule.iosVal = true;
                    this.actRule.h5Val = true;
                } else if (launchChannels == "1,2") {
                    this.actRule.androidVal = true;
                    this.actRule.iosVal = true;
                    this.actRule.h5Val = false;
                } else if (launchChannels == "1,3") {
                    this.actRule.androidVal = true;
                    this.actRule.iosVal = false;
                    this.actRule.h5Val = true;
                } else if (launchChannels == "2,3") {
                    this.actRule.androidVal = false;
                    this.actRule.iosVal = true;
                    this.actRule.h5Val = true;
                } else if (launchChannels == "1") {
                    this.actRule.androidVal = true;
                    this.actRule.iosVal = false;
                    this.actRule.h5Val = false;
                } else if (launchChannels == "2") {
                    this.actRule.androidVal = false;
                    this.actRule.iosVal = true;
                    this.actRule.h5Val = false;
                } else if (launchChannels == "3") {
                    this.actRule.androidVal = false;
                    this.actRule.iosVal = false;
                    this.actRule.h5Val = true;
                } else {
                    this.actRule.androidVal = false;
                    this.actRule.iosVal = false;
                    this.actRule.h5Val = false;
                }
            } else {
                marketRequest.getDeptJumpLinks({}, res => {
                    if (res.code == "0000") {
                        if (res.data.androidConfigValue) {
                            this.actRule.androidAdd = res.data.androidConfigValue;
                        }
                        if (res.data.h5ConfigValue) {
                            this.actRule.h5Add = res.data.h5ConfigValue;
                        }
                        if (res.data.iosConfigValue) {
                            this.actRule.iosAdd = res.data.iosConfigValue;
                        }
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                });
            }
            this.actRuleFun();
        },
        actRuleFun() {
            if (
                this.actRule.androidVal &&
                this.actRule.iosVal &&
                this.actRule.h5Val
            ) {
                this.actRule.launchChannels = "1,2,3";
                this.actRule.typeRule = false;
            } else if (this.actRule.androidVal && this.actRule.iosVal) {
                this.actRule.launchChannels = "1,2";
                this.actRule.typeRule = false;
            } else if (this.actRule.androidVal && this.actRule.h5Val) {
                this.actRule.launchChannels = "1,3";
                this.actRule.typeRule = false;
            } else if (this.actRule.iosVal && this.actRule.h5Val) {
                this.actRule.launchChannels = "2,3";
                this.actRule.typeRule = false;
            } else if (this.actRule.androidVal) {
                this.actRule.launchChannels = "1";
                this.actRule.typeRule = false;
            } else if (this.actRule.iosVal) {
                this.actRule.launchChannels = "2";
                this.actRule.typeRule = false;
            } else if (this.actRule.h5Val) {
                this.actRule.launchChannels = "3";
                this.actRule.typeRule = false;
            } else {
                this.actRule.launchChannels = "";
                this.actRule.typeRule = true;
            }
        },

        getAngel() {
            // 清空画布
            var c = this.$refs["myCanvas"];
            var cxt = c.getContext("2d");
            c.height = c.height;
            let turntableColor = "";
            if (this.formDataList) {
                this.angel = 360 / this.formDataList.length;
                // 格式化成插件需要的奖品列表格式
                this.list = this.formDataList.map(m => {
                    return {
                        id: m.id,
                        name: m.awardsRefName,
                        image: m.awardsPicUrl
                    };
                });
            }
            this.wheelSurf = turntable({
                myCanvas: this.$refs["myCanvas"],
                list: this.list, // 奖品 列表，(必填)
                outerCircle: {
                    color: this.descJson.homeJson.turntableColor // 外圈颜色(可选)
                },
                innerCircle: {
                    color: "#fff" // 里圈颜色(可选)
                },
                dots: ["#fff", "#fff7af"], // 装饰点颜色(可选)
                disk: [
                    "#fcf9f0",
                    "#fff7af",
                    "#fcf9f0",
                    "#fff7af",
                    "#fcf9f0",
                    "#fff7af",
                    "#fcf9f0",
                    "#fff7af",
                    "#fcf9f0",
                    "#fff7af",
                    "#fcf9f0",
                    "#fff7af"
                ], //中心奖盘的颜色，默认7彩(可选)
                title: {
                    color: "#E34A44",
                    font: "10px Arial"
                } // 奖品标题样式(可选)
            });
            this.wheelSurf.init();
        },
        checkAwards(item) {
            let that = this;
            if(this.awardsRefNameForm == null||this.awardsRefNameForm.length>1||this.awardsRefNameForm.length==0){
                that.$message({message: "请先选择奖项后查看", type: "error"});
                return false;
            }
            if(item.awardsCategory == 2){
                marketRequest.getShopInfo({'id':item.awardsRefId}, res=> {
                    if (res.code == "0000") {
                        if(res.data == null){
                            that.awardsRefNameForm = [];
                        }else{
                            that.awardsRefNameForm = [{
                                id : res.data.id,
                                code : res.data.code,
                                goodsName : res.data.chineseName,
                                totalStock : res.data.totalStock,
                                goodsCategory : res.data.fullNamePath,
                                merchantName : res.data.storeName,
                                salePrice : res.data.salePriceWithTax,
                            }];
                        }
                    }
                    that.showGoods = true;
                    that.awardsRefNameVisible = true;
                });
            }else if(item.awardsCategory == 3){
                let that = this;
                let data = {
                    promotionId: item.awardsRefId,
                    promType: 11,
                    specialField: true,
                    start: 1,
                    limit: 10,
                }
                this.utils.request.couponQueryConfigPage(data, res => {
                    if (res.code == "0000") {
                        that.awardsRefNameForm = res.data.rows;
                    }else{
                        that.awardsRefNameForm = [];
                    }
                    that.showGoods = false;
                    that.awardsRefNameVisible = true;
                });
            }
        }
    },
    created: function () {
        this.id = this.$route.params.id;
        this.initFormDataList();
        if (typeof this.$route.params.auth != "undefined") {
            this.active = this.$route.params.auth;
        }
    },

    findPage: function () {
        let this_ = this;
        this.utils.request.getRegionPageList(this_.filters, function (res) {
            this_.$refs.JicTable.findPage({
                content: res.data.rows,
                total: res.data.total
            });
        });
        // var data = [{id: 2001070006501479, merchantId: null, areaCode: "1", areaName: "1", orgId: 1909110000098882,orgName: "张小二服饰", orgCode: null}]
        // this_.$refs.JicTable.findPage({ content: data, total: 10 });
    },
    mounted() {
        if (this.$route.params.id && parseInt(this.$route.params.id) > 0) {
            this.getLotteryThemeInfo();
        }
        this.queryMerchantPageOther();
        // this.queryStoreFindByIds();
    }
};
</script>

<style lang="scss" scoped>
@import '../../../assets/css/public.scss';

/deep/ .is-bordered {
    padding: 12px 20px 12px 10px;
}

.mleft10 {
    margin-right: 10px;
}

label {
    font-weight: normal;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
}

.form-group .pdt3px {
    padding-top: 3px;
}

.b-b {
    border-bottom: 1px solid #dddddd;
}

.line-dashed {
    border-style: dashed !important;
    background-color: transparent;
    border-width: 0;
}

.line-lg {
    margin-top: 15px;
    margin-bottom: 15px;
}

.line {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    font-size: 0;
    overflow: hidden;
}

table {
    background-color: transparent;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

.i-checks {
    padding-left: 0;
    margin-right: 15px;
    cursor: pointer;
    color: #666666;
}

.radio-inline,
.checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
}

.panel-body tr {
    padding: 0 15px;
}

.mgt15 {
    margin-top: 15px;
}

.type {
    display: flex;
    align-items: center;
}

.type p {
    text-align: right;
    margin-right: 20px;
    width: 120px;
}

/deep/ button {
    margin-bottom: 10px;
    margin-left: 10px;
}

/deep/ .content {
    padding: 0 10px 0 0;
    font-size: 14px;
    color: #666666;
    background-color: #fff;
}

.title {
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    margin-bottom: 60px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #c8cbd0;
    /* font-size: 16px; */
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #c8cbd0;
    /* font-size: 16px; */
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #c8cbd0;
    /* font-size: 16px; */
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #c8cbd0;
    /* font-size: 16px; */
}

/**
           修改element上传组件样式
        */
.el-upload-dragger-update {
    text-align: center;
    margin-left: -10px;
    margin-bottom: 20px;
}

.el-upload-dragger-update /deep/ .el-upload .el-upload-dragger {
    border: 0px;
    /* width: 100px; */
    height: 42px;
}

/*素材弹窗 */

.el-aside-Superior /deep/ .el-tabs {
    height: 600px;
}

.material-main {
    width: 99%;
    height: 600px;
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
        0 0 6px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    position: relative;
}

.material-header {
    display: flex;
    justify-content: space-between;
}

.material-title-right {
    margin-top: 20px;
    margin-right: 30px;
}

.material-title-left {
    margin-top: 20px;
    margin-left: 30px;
    font-size: 15px;
    color: #409eff;
}

.material-main-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.material-main-item {
    margin-left: 10px;
    width: 145px;
    height: 210px;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #fff;
    cursor: pointer;
}

.material-main-item-img {
    width: 100%;
    height: 180px;
}

.material-main-item-name {
    margin-top: 5px;
    color: #909399;
}

.material-main-item-select {
    border: 1px solid #409eff;
}

.el-upload-list-item-actions {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    /* opacity: 0; */
    display: none;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
}

.el-upload-list-item-actions-hover {
    display: block;
}

.upload-delete {
    cursor: pointer;
}

.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 80px;
    padding-right: 10px;
}

.activityTags {
    /deep/ .el-form-item__content {
        /deep/ .el-button {
            margin-left: 20px;
            margin-bottom: 0 !important;
        }
    }
}

//优惠门槛
.discountConditions {
    /deep/ .el-input {
        width: auto;
    }

    /deep/ .el-form-item__label {
        line-height: 32px !important;
        margin-right: 5px;
    }
}

/*第二步新加样式*/
/deep/ .el-tabs__content {
    padding: 0;
}

.row-line-button {
    width: 100%;
}

.chosenProducts {
    margin: 0 !important;
}

.title {
    padding-left: 89px;
}

.aside {
    width: 550px !important;
    margin-right: 30px;

    .unit {
        width: 100%;
        padding: 60px 0 60px 40px;
        border: 1px solid #d8d8d8;
        border-radius: 6px;
        margin-bottom: 30px;
    }

    .addGoods {
        margin: 0 !important;
    }

    .rate {
        /deep/ .el-input__inner {
            width: 310px;
        }
    }

    .imgUpload {
        .tips {
            font-size: 12px;
            color: #999;
            margin-top: 10px;

            span {
                &:first-child {
                    margin-right: 40px;
                }
            }
        }

        .avatar-uploader {
            text-align: left;

            /deep/ .el-upload {
                position: relative;
                overflow: hidden;

                .flex {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                .img,
                i {
                    width: 88px;
                    height: 72px;
                    border: 1px dashed #d9d9d9;
                    margin-right: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;

                    img {
                        height: 90%;
                    }
                }

                i {
                    cursor: pointer;
                }
            }
        }
    }

    .see {
        position: relative;

        /deep/ .el-button {
            position: absolute;
            left: 420px;
            top: 0;
            margin: 0;
            padding: 0 !important;
            width: 60px;
        }
    }

    .select {
        /deep/ .el-select {
            width: 310px;
        }
    }

    .ml100 {
        /deep/ .el-form-item__content {
            display: flex;
            margin-left: 100px;
        }
    }

    .precent {
        height: 32px;
        line-height: 32px;
        font-size: 18px;
        color: #333333;
        margin-left: 14px;
    }
}

.mt76 {
    margin-top: 76px;
}

.delete {
    margin-left: 325px !important;
}

.add {
    margin-bottom: 30px;
    text-align: left;

    /deep/ .el-button {
        margin: 0 !important;
    }

    span {
        font-size: 12px;
        // color: #febf5f;
        margin-left: 10px;
    }
}

.desc {
    text-align: center;
    margin-bottom: 84px;

    /deep/ .el-textarea {
        width: 450px;

        .el-textarea__inner {
            width: 100%;
        }
    }
}

.awardsSelect {
    /deep/ .el-input {
        width: 446px;

        .el-textarea__inner {
            width: 100%;
        }
    }
}

.rule {
    /deep/ .el-textarea {
        width: 450px;

        .el-textarea__inner {
            width: 100%;
        }
    }

    .channel {
        /deep/ .el-checkbox {
            margin: 6px 30px 0 0;

            .el-checkbox__label {
                font-weight: normal;
            }
        }

        /deep/ .el-form-item__content {
            width: 450px;

            .el-textarea__inner {
                width: 100%;
            }

            .el-row {
                .el-form-item__label {
                    font-size: 13px;
                }

                .el-form-item__content {
                    width: 270px;
                }
            }
        }
    }
}

.t_c {
    margin: 0 auto !important;
}

.addGoodsForm {
    /deep/ .el-input__inner {
        width: 200px;
    }
}

.no100 {
    /deep/ .el-input {
        width: auto;
    }
}

.nomargin {
    /deep/ .el-radio {
        margin: 0 !important;
        line-height: 32px;
        text-align: right;

        /deep/ .el-radio__label {
            font-size: 16px;
            color: #999999;
        }
    }

    .endAlignment {
        display: inline-block;
        height: 32px;
        line-height: 32px;
        margin-right: 30px;
    }
}

.flexBox {
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;

    .child-name {
        flex-shrink: 0;
    }

    .checkboxes {
        display: flex;
    }
}

.pdl85 {
    padding-left: 85px;
}

.pdl126 {
    padding-left: 126px;
}

.errorTipsAlignment {
    /deep/ .el-form-item__content {
        .el-form-item__error {
            position: absolute !important;
            top: -3px !important;
            left: 175px !important;
        }
    }
}

.w126 {
    width: 126px;
}

.oe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.width100 {
    width: 97px;
}

/* 抽奖按钮样式调整 */
.draw-image {
    transform: rotate(-4deg);
}

.w104 {
    width: 104px;
}

/* 抽奖按钮样式 */
.point-span {
    z-index: 999;
}

.ml90 {
    margin-left: 90px;
}

.pdl30 {
    padding-left: 30px;
}

.pdt20 {
    padding-top: 20px;
}

/deep/ .el-table__fixed::before {
    display: none !important;
}

/deep/ .el-table__fixed-right::before {
    display: none !important;
}

.labelAlignment {
    /deep/ .el-form-item__label {
        height: 33px !important;
        line-height: 33px !important;
    }
}

.w145 {
    width: 145px !important;
}

.radioLabelcolor333 {
    /deep/ .el-radio__label {
        color: #333 !important;
    }
}

.radioLabelSize16 {
    /deep/ .el-radio__label {
        font-size: 16px !important;
        ;
    }
}

.w145 {
    width: 145px !important;

    /deep/ .el-input__inner {
        width: 145px !important;
    }
}

.width450 {
    width: 450px !important;

    /deep/ .el-input__inner {
        width: 450px !important;
    }
}
</style>
